<!-- FullScreen -->
<template>
  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <v-btn class="hidden-sm-and-down" v-on="on" :small="small" icon @click="toggle"><v-icon>{{isFullscreen ? 'fullscreen_exit' : 'fullscreen'}}</v-icon></v-btn>
    </template>
    <span>{{isFullscreen ? '退出全屏' : '进入全屏'}}</span>
  </v-tooltip>
</template>
<script>
import Screenfull from 'screenfull'
export default {
  name: 'FullScreenWidget',
  props: {
    small: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      isFullscreen: Screenfull.isFullscreen || false
    }
  },
  methods: {
    toggle: function() {
      if (!Screenfull.isEnabled) {
        alert('Your browser does not support full screen')
      } else {
        this.isFullscreen = !this.isFullscreen
        Screenfull.toggle()
      }
    }
  }
}
</script>
